<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading">
			<template #icon>
				<loader></loader>
			</template>
		</e-loading-page>
		<view class="e-p-l-20 e-p-r-20 e-p-t-30">
			<order-goods-card class="" :goodsList="[info||{}]">
				<template v-slot:header>
					<text>{{ $t('order.退款商品') }}</text>
				</template>
			</order-goods-card>
			<view class="e-p-30 e-m-t-20 bg-white" :style="{ '--backgroundColor': activeBackgroundColor }">
				<text class="e-font-30">{{ $t('order.退款类型') }}</text>
				<view class="e-flex e-m-t-30">
					<view class="type-button e-m-r-30" :class="{ 'button-act': form.applyType === 1 }" @tap="form.applyType = 1">
						{{ $t('order.仅退款') }}
					</view>
					<view class="type-button" :class="{ 'button-act': form.applyType === 2 }" @tap="form.applyType = 2">
						{{ $t('order.退款退货') }}
					</view>
				</view>
				<view class="c-secondary e-font-24 e-m-t-20 e-m-b-10">
					{{ $t('order.退款类型提示1') }}
				</view>
				<view class="c-secondary e-font-24">
					{{ $t('order.退款类型提示2') }}
				</view>
			</view>
			<view class="form-box e-p-30 e-m-t-20 bg-white">
				<view class="e-font-30">{{ $t('order.退款原因') }}</view>
				<view class="input-box e-flex e-flex-between e-p-20" :class="{ 'c-secondary': !form.buyerMsg }" @tap="show = true">
					<text>{{ form.buyerMsg || $t('order.请选择退款原因') }}</text>
					<app-image :size="['36rpx']" src="classify/arrow-right.png" />
				</view>
				<view class="e-font-30">{{ $t('order.退款金额') }}</view>
				<view class="input-box e-p-20 c-red">{{ $unitEn }}{{ info?.deputyMoneyPay }}</view>
				<view class="e-font-30">{{ $t('order.退款说明') }}</view>
				<textarea class="input-box e-p-20" v-model="form.buyerExplain" :placeholder="$t('order.退款说明提示')" />
			</view>
			<view class="e-p-30 e-m-t-20 bg-white">
				<view class="e-font-30">{{ $t('order.上传凭证') }}</view>
				<upload ref="uploadRef" :uploadIcon="$staticPath('user/upload.png')"></upload>
				<view class="e-m-t-26 c-secondary">
					{{ $t('order.凭证提示') }}
				</view>
			</view>
		</view>

		
		<view class="fixed-button bg-white">
			<button class="bg-primary c-white" @tap="submit">{{ $t('order.提交') }}</button>
			<view class="ios-btm"></view>
		</view>
		<view style="height: 160rpx"></view>
		<view class="ios-btm"></view>
		<refund-popup :show="show" :text="$t('common.确认')" :color="AppSkin.primary" @close="show = false" @confirm="popupConfirm"></refund-popup>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { getRefundGoodsDetail, postApplyForRefund } from '@/common/request/api';
import { useCurrentInstance, usePromise } from '@/common/hooks';
import { useI18n } from 'vue-i18n';
import { onLoad } from '@dcloudio/uni-app';
import refundPopup from '../child/refund-popup.vue';
import type { UploadInstance } from '@/typings/components';
import { useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { throttle } from '@/common/utils';

const props = defineProps({
	id: String,
	orderId: String,
	goodsId: String
});

const ctx = useCurrentInstance();
const { t } = useI18n();

const { AppSkin } = storeToRefs(useInit());
const activeBackgroundColor = computed(() => {
	return AppSkin.value.primary.replace('1)', '0.05)');
});

const loading = ref(false);

const [getGoods, info] = usePromise(async () => {
	const res = await getRefundGoodsDetail(props.goodsId!);
	loading.value = false;
	return res.data;
});

const show = ref(false);
const form = ref({
	applyType: 1,
	buyerMsg: null,
	buyerExplain: ''
});

const uploadRef = ref<UploadInstance>();

const popupConfirm = (text: string) => {
	form.value.buyerMsg = text;
	show.value = false;
};
const submit = throttle(function () {
	if (!form.value.buyerMsg) {
		ctx.$toastApp(t('order.请选择退款原因'));
		return;
	}
	let photoFiles = uploadRef.value?.imgList?.map?.((item) => item.url).join(',');
	postApplyForRefund({
		deputyId: props.id,
		photoFiles,
		...form.value
	}).then((res) => {
		
			ctx.$goRedirectTo('/pages/order/success', {
				type: 2,
				id: props.orderId
			});
		
	});
},1000)

onLoad(() => {
	getGoods();
});
</script>

<style lang="scss" scoped>
page {
	background-color: #f7f7f7;
}
.type-button {
	width: 268rpx;
	height: 64rpx;
	line-height: 64rpx;
	background: #ffffff;
	border-radius: 10rpx;
	border: 2rpx solid #c0c0c0;
	text-align: center;
}
.button-act {
	background: var(--backgroundColor);
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}
.form-box {
	> view {
		margin-bottom: 26rpx;
	}
	.input-box {
		border-radius: 10rpx;
		border: 2rpx solid #c0c0c0;
	}
	textarea {
		height: 200rpx;
	}
}

.fixed-button {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 20rpx 30rpx;
	button {
		width: 100%;
		height: 100rpx;
		border-radius: 50rpx;
	}
}
</style>
